// function getWeather(cityCode){
//     // 1.1 
//     myaxios01({
//         url:'http://hmajax.itheima.net/api/weather',
//         method:'POST',
//         params:{
//             city:cityCode
//         }


//     }).then(result=>{
//         console.log(result);
//     }).catch(error=>{
//         console.log(error);
//     })




// }
// // 北京市城市编码

// getWeather('110100')

// 获取数据和展示数据的逻辑，一般都会使用很多次，因此可以获取数据展示逻辑


function myaxios01(config){
    // 在axios函数调用时，需要集成一个传递查询的功能。params每次调用时不能保证都有。
    // 使用URLSearchParams转换查询字符串
    return new Promise((resolve,reject)=>{
        const xhr = new XMLHttpRequest()
       

        // 1. 做一个判断
        if(config.params){
            // 当config对象中有params

            // 浏览器提供的构造函数
            const paramsObj = new URLSearchParams(config.params)

            // 定义常量，接受字符串
            const queryString =  paramsObj.toString()

            // 将查询参数字符串拼接在问号后面
            config.url+=`?${queryString}`
            
        }
        xhr.open(config.method||'GET',config.url)
        xhr.addEventListener('loadend',()=>{
            if(xhr.status>=200&&xhr.status<300){
                resolve(JSON.parse(xhr.response))
            }else{
                reject(new Error(xhr.response))
            }
        })
        // 判断是否含有请求体
        if(config.data){
            // 处理数据类型

            // 将数据对象转换为JSON字符串
            const jsondata= JSON.stringify(config.data)

            // 请求体内容标记需要自行进行设置，需要携带额外信息，告诉服务器


            // xhr.setRequestHeader('content-type','application/json')

            xhr.setRequestHeader('Content-Type','application/json')

            xhr.send(jsondata)
            // 如果没有请求体数据，正常发送请求
        }else{
        xhr.send()
        }
    })
}

document.querySelector('.search-city').addEventListener('input',(e)=>{
    // 获取关键字，拿到后端接口
    console.log(e.target.value);
    myaxios01({
        url:'http://hmajax.itheima.net/api/weather/city',
        params:{
            city:e.target.value
        }
    }).then(result=>{
        console.log(result);
        
        // 定义一组常量，接受返回到的map集合

       const cityname = result.data.map(item=>{
        return `<li class="city-area" data-code="${item.code}">${item.name}</li>`
       }).join('')
       console.log(cityname);
    document.querySelector('.search-list').innerHTML = cityname
    })

})

// 检测搜索列表点击事件，获取城市code值


function getWeather(cityCode){
    myaxios01({
        url:'http://hmajax.itheima.net/api/weather',
        params:{
// 传递查询参数
            city:cityCode

        }
    }).then(result =>{
// 展示数据到页面上
        const weaData = result.data
        // 将数据嵌入到页面上，将HTML代码复制

        //阳历和农历的日期  
        const dataStr = 
        `<div class="title">
        <span class="dateShort">${result.data.dateShort}</span>
        <span class="calendar">农历</span>
        <span class="dateLunar">${result.data.dateLunar}</span>
        </span>
        </div>`
        const weatherData = 
        `<div class="tem-box">
         <span class="temp">
         <span class="temperature">${weaData.temperature}</span>
        <span>℃</span>
    </span>
    </div>
    <div class="climate-box">
    <div class="air">
        <span class="psPm25">${weaData.psPm25}/span>
        <span class="psPm25Level">${weaData.psPm25Level}</span>
    </div>
    <ul class="weather-list">
        <li class="first">
            <img src="${weaData.weatherImg}" alt="" class="weatherImg">
            <span class="weather">${weaData.weather}</span>
        </li>
        <li class="windDirection">${weaData.windDirection}</li>
        <li class="windPower">${weaData.windPower}</li>
    </ul>
    </div>`
    const towea = weaData.todayWeather
    const toweather = `<div class="today-weather">
    <div class="range-box">
<span>今天：</span>
<span class="range">
<span class="weather">${towea.weather}</span>
<span class="temNight">${towea.temNight}</span>
<span>-</span>
<span class="temDay">${towea.temDay}</span>
<span>℃</span>
</span>
</div>
<ul class="sun-list">
<li>
    <span>紫外线</span>
    <span class="ultraviolet">${towea.ultraviolet}</span>
</li>
<li>
    <span>湿度</span>
    <span class="humidity">${towea.humidity}</span>%
</li>
<li>
    <span>日出</span>
    <span class="sunriseTime">${towea.sunriseTime}</span>
</li>
<li>
    <span>日落</span>
    <span class="sunsetTime">${towea.sunsetTime}</span>
</li>
</ul>
    </div>`

    // 七日天气数据为一个数组，可以遍历数组
    
    // map遍历数组

    const sevObj = weaData.dayForecast
    // 遍历后每个元素都是天气的小对象
    const sevenobj = sevObj.map(item =>{
     return `<li class="item">
     <div class="date-box">
         <span class="dateFormat">${item.dateFormat}</span>
         <span class="date">${item.date}</span>
     </div>
     <div class="data-second">
         <img src="https://hmajax.itheima.net/weather/xiaoyu.png" alt="" class="Img">
     <span class="weather">${item.weather}</span>
         </div>
     <div class="temp-second">
         <span class="temNight">${item.temNight}</span>~
         <span class="temDay">${item.temDay}</span>
         <span>℃</span>
     </div>
     <div class="wind">
         <span class="windDirection">${item.windDirection}</span>
         <span class="windPower">&lt;${item.windPower}</span>
     </div>
 </li>`
//  join 
    }).join('')
    document.querySelector('.week-wrap').innerHTML = sevenobj
    // 在本地返回大数组，拼接起来接受打印
console.log(sevObj);


  
        document.querySelector('.title').innerHTML= dataStr
        document.querySelector('.area').innerHTML= weaData.area
        document.querySelector('.weather-box').innerHTML = weatherData
        document.querySelector('.today-weather').innerHTML = toweather
       
    console.log(result);
    }).catch(error=>{
        console.log(error);
    })
}

// ⭐用事件委托绑定li上的点击事件

document.querySelector('.search-list').addEventListener('click', e => {
    // ⭐事件处理函数，当事件源为li时
   console.log(e.target.dataset.code);

   const codes = e.target.dataset.code

   getWeather(codes)


    //⭐目标三：切换城市天气



    // // dataset意为自定义属性，可用于值和值的关联

    // // 自定义属性方法：data-******


    // const cityCode = e.target.dataset.code

    // console.log(cityCode);

    // }
})
